<template>
	<el-checkbox-group class="catalog_block" v-model="checkecData">
		<el-row :gutter="16">
			<el-col :span="responsive" v-for="(item, index) in data" :key="index">
				<div class="item">
					<el-checkbox :label="item.id"></el-checkbox>
					<dl>
						<dt>{{ item.initial }}</dt>
						<dd>{{ item.name }}</dd>
					</dl>
					<el-button-group>
						<el-button type="text" @click="handleDataOperate('move', item)">移动到</el-button>
						<el-button type="text" @click="handleDataOperate('look', item)">详情</el-button>
						<el-button type="text" @click="handleDataOperate('edit', item)">编辑</el-button>
						<el-button type="text" @click="handleDeleteData(item)">删除</el-button>
					</el-button-group>
				</div>
			</el-col>
		</el-row>
	</el-checkbox-group>
</template>

<script>
import catalogMixins from '../mixins/catalog';
export default {
	mixins: [catalogMixins],
	data() {
		return {
			responsive: 4
		};
	},
	watch: {
		responsive(value) {
			console.log(value);
		}
	},
	mounted() {
		this.dynamicUpdateColumn();
		window.addEventListener('resize', () => {
			this.dynamicUpdateColumn();
		});
	},
	methods: {
		//动态修改列
		dynamicUpdateColumn() {
			let width = document.body.clientWidth;
			if (width > 1920) {
				this.responsive = 3;
			} else if (width >= 1734) {
				this.responsive = 4;
			} else if (width >= 1550) {
				this.responsive = 5;
			} else if (width >= 1366) {
				this.responsive = 6;
			} else {
				this.responsive = 8;
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.catalog_block::v-deep {
	.el-col-8:nth-child(n + 4) {
		margin-top: 16px;
	}
	.el-col-6:nth-child(n + 5) {
		margin-top: 16px;
	}
	.el-col-5 {
		width: 20%;
		&:nth-child(n + 6) {
			margin-top: 16px;
		}
	}
	.el-col-4:nth-child(n + 7) {
		margin-top: 16px;
	}
	.item {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 150px;
		border-radius: 4px;
		padding: 16px 16px 4px;
		border: solid 1px #e4e7ed;
		box-sizing: border-box;
		position: relative;
		&:hover {
			background-color: #f2f6fc;
		}
	}
	.el-checkbox {
		position: absolute;
		top: 8px;
		right: 8px;
	}
	.el-checkbox__label {
		display: none;
	}
	dl {
		display: flex;
		align-items: center;
	}
	dt {
		width: 60px;
		height: 60px;
		flex-shrink: 0;
		line-height: 60px;
		text-align: center;
		border-radius: 8px;
		font-size: 24px;
		background-color: var(--primary);
		color: #fff;
	}
	dd {
		font-size: 16px;
		margin-left: 16px;
		line-height: 24px;
	}
	.el-button-group {
		display: flex;
		justify-content: space-around;
		width: 100%;
		border-top: solid 1px #e4e7ed;
		&::before,
		&::after {
			content: none;
		}
	}
}
</style>
